import { expect, test } from '@playwright/test'

test('can match props by a key', async ({ page }) => {
  await page.goto('/match-props-on-key')

  await expect(page.getByText('bar count is 5')).toBeVisible()
  await expect(page.getByText('baz count is 5')).toBeVisible()
  await expect(page.getByText('foo.data count is 5')).toBeVisible()
  await expect(page.getByText('first foo.data name is User 1')).toBeVisible()
  await expect(page.getByText('last foo.data name is User 5')).toBeVisible()
  await expect(page.getByText('foo.companies count is 5')).toBeVisible()
  await expect(page.getByText('first foo.companies name is Company 1')).toBeVisible()
  await expect(page.getByText('last foo.companies name is Company 5')).toBeVisible()
  await expect(page.getByText('foo.teams count is 5')).toBeVisible()
  await expect(page.getByText('first foo.teams name is Team 1')).toBeVisible()
  await expect(page.getByText('last foo.teams name is Team 5')).toBeVisible()
  await expect(page.getByText('foo.page is 0')).toBeVisible()
  await expect(page.getByText('foo.per_page is 5')).toBeVisible()
  await expect(page.getByText('foo.meta.label is first')).toBeVisible()

  await page.getByRole('button', { name: 'Reload' }).click()

  await expect(page.getByText('bar count is 5')).toBeVisible()
  await expect(page.getByText('baz count is 10')).toBeVisible()
  await expect(page.getByText('foo.data count is 5')).toBeVisible()
  await expect(page.getByText('first foo.data name is User 1')).toBeVisible()
  await expect(page.getByText('last foo.data name is User 5')).toBeVisible()
  await expect(page.getByText('foo.companies count is 5')).toBeVisible()
  await expect(page.getByText('first foo.companies name is Company 1')).toBeVisible()
  await expect(page.getByText('last foo.companies name is Company 5')).toBeVisible()
  await expect(page.getByText('foo.teams count is 10')).toBeVisible()
  await expect(page.getByText('first foo.teams name is Team 1')).toBeVisible()
  await expect(page.getByText('last foo.teams name is Team 10')).toBeVisible()
  await expect(page.getByText('foo.page is 1')).toBeVisible()
  await expect(page.getByText('foo.per_page is 5')).toBeVisible()
  await expect(page.getByText('foo.meta.label is second')).toBeVisible()

  await page.getByRole('button', { name: 'Reload' }).click()

  await expect(page.getByText('bar count is 5')).toBeVisible()
  await expect(page.getByText('baz count is 15')).toBeVisible()
  await expect(page.getByText('foo.data count is 5')).toBeVisible()
  await expect(page.getByText('first foo.data name is User 1')).toBeVisible()
  await expect(page.getByText('last foo.data name is User 5')).toBeVisible()
  await expect(page.getByText('foo.companies count is 5')).toBeVisible()
  await expect(page.getByText('first foo.companies name is Company 1')).toBeVisible()
  await expect(page.getByText('last foo.companies name is Company 5')).toBeVisible()
  await expect(page.getByText('foo.teams count is 15')).toBeVisible()
  await expect(page.getByText('first foo.teams name is Team 1')).toBeVisible()
  await expect(page.getByText('last foo.teams name is Team 15')).toBeVisible()
  await expect(page.getByText('foo.page is 2')).toBeVisible()
  await expect(page.getByText('foo.per_page is 5')).toBeVisible()
  await expect(page.getByText('foo.meta.label is third')).toBeVisible()

  await page.getByRole('button', { name: 'Get Fresh' }).click()

  await expect(page.getByText('bar count is 5')).toBeVisible()
  await expect(page.getByText('baz count is 5')).toBeVisible()
  await expect(page.getByText('foo.data count is 5')).toBeVisible()
  await expect(page.getByText('first foo.data name is User 1')).toBeVisible()
  await expect(page.getByText('last foo.data name is User 5')).toBeVisible()
  await expect(page.getByText('foo.companies count is 5')).toBeVisible()
  await expect(page.getByText('first foo.companies name is Company 1')).toBeVisible()
  await expect(page.getByText('last foo.companies name is Company 5')).toBeVisible()
  await expect(page.getByText('foo.teams count is 5')).toBeVisible()
  await expect(page.getByText('first foo.teams name is Team 1')).toBeVisible()
  await expect(page.getByText('last foo.teams name is Team 5')).toBeVisible()
  await expect(page.getByText('foo.page is 0')).toBeVisible()
  await expect(page.getByText('foo.per_page is 5')).toBeVisible()
  await expect(page.getByText('foo.meta.label is first')).toBeVisible()

  await page.getByRole('button', { name: 'Reload' }).click()

  await expect(page.getByText('bar count is 5')).toBeVisible()
  await expect(page.getByText('baz count is 10')).toBeVisible()
  await expect(page.getByText('foo.data count is 5')).toBeVisible()
  await expect(page.getByText('first foo.data name is User 1')).toBeVisible()
  await expect(page.getByText('last foo.data name is User 5')).toBeVisible()
  await expect(page.getByText('foo.companies count is 5')).toBeVisible()
  await expect(page.getByText('first foo.companies name is Company 1')).toBeVisible()
  await expect(page.getByText('last foo.companies name is Company 5')).toBeVisible()
  await expect(page.getByText('foo.teams count is 10')).toBeVisible()
  await expect(page.getByText('first foo.teams name is Team 1')).toBeVisible()
  await expect(page.getByText('last foo.teams name is Team 10')).toBeVisible()
  await expect(page.getByText('foo.page is 1')).toBeVisible()
  await expect(page.getByText('foo.per_page is 5')).toBeVisible()
  await expect(page.getByText('foo.meta.label is second')).toBeVisible()
})
